1import {useState, useReducer, PropsWithChildren} from 'react';
  2import Box from '@mui/material/Box';
  3import {useTranslation} from 'react-i18next';
  4import {getSession, useSession} from 'next-auth/react';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import Fab from '../../../containers/Fab';
  9import pageUtils from '../../../lib/pageUtils';
 10import usePermissions from '../../../hooks/usePermissions';
 11import EventLayout, {TabComponent} from '../../../layouts/Event';
 12import {
 13  EventByUuidDocument,
 14  FindUserVehiclesDocument,
 15  VehicleEntity,
 16  useFindUserVehiclesQuery,
 17} from '../../../generated/graphql';
 18
 19interface Props {
 20  eventUUID: string;
 21  announcement?: string;
 22}
 23
 24const Page = (props: PropsWithChildren<Props>) => {
 25  return <EventLayout {...props} Tab={TravelsTab} />;
 26};
 27
 28const TravelsTab: TabComponent<Props> = () => {
 29  const {t} = useTranslation();
 30  const session = useSession();
 31  const {
 32    userPermissions: {canAddTravel},
 33  } = usePermissions();
 34  const [openNewTravelDialog, setNewTravelDialog] = useState(false);
 35  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 36  const [selectedVehicle, setSelectedVehicle] = useState<VehicleEntity>();
 37
 38  const isAuthenticated = session.status === 'authenticated';
 39  const {data} = useFindUserVehiclesQuery({
 40    skip: !isAuthenticated,
 41  });
 42  const vehicles = data?.me?.profile?.vehicles?.data || [];
 43
 44  const addTravelClickHandler =
 45    isAuthenticated && vehicles?.length != 0
 46      ? toggleVehicleChoice
 47      : () => setNewTravelDialog(true);
 48
 49  return (
 50    <Box>
 51      <TravelColumns toggle={addTravelClickHandler} />
 52      {canAddTravel() && (
 53        <Fab onClick={addTravelClickHandler} aria-label="add-car">
 54          {t('travel.creation.title')}
 55        </Fab>
 56      )}
 57      <NewTravelDialog
 58        key={selectedVehicle?.id || 'noVehicle'}
 59        opened={openNewTravelDialog}
 60        toggle={() => setNewTravelDialog(false)}
 61        selectedVehicle={selectedVehicle}
 62      />
 63      <VehicleChoiceDialog
 64        open={openVehicleChoice}
 65        toggle={toggleVehicleChoice}
 66        setNewTravelDialog={setNewTravelDialog}
 67        setSelectedVehicle={setSelectedVehicle}
 68        vehicles={vehicles}
 69      />
 70    </Box>
 71  );
 72};
 73
 74export const getServerSideProps = pageUtils.getServerSideProps(
 75  async (context, apolloClient) => {
 76    const {uuid} = context.query;
 77    const {host = ''} = context.req.headers;
 78    const session = await getSession(context);
 79    let event = null;
 80
 81    // Fetch event
 82    try {
 83      const {data} = await apolloClient.query({
 84        query: EventByUuidDocument,
 85        variables: {uuid},
 86      });
 87      event = data?.eventByUUID?.data;
 88    } catch (error) {
 89      return {
 90        notFound: true,
 91      };
 92    }
 93
 94    // Fetch user vehicles
 95    if (session)
 96      await apolloClient.query({
 97        query: FindUserVehiclesDocument,
 98      });
 99
100    return {
101      props: {
102        eventUUID: uuid,
103        metas: {
104          title: event?.attributes?.name || '',
105          url: `https://${host}${context.resolvedUrl}`,
106        },
107      },
108    };
109  }
110);
111
112export default Page;